<!DOCTYPE html>
<html>
<head lang="en">
    <title>A Flexible Grid</title>

    <meta name="DC.creator" content="Ethan Marcotte - http://unstoppablerobotninja.com/" />
    <meta name="DC.language" content="en" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style type="text/css" media="screen, projection">
        .section:after,
        ul.nav:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
        body { line-height:1; }
        ol,ul { list-style:none; }
        blockquote,q { quotes:none; }
        blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
        ins { text-decoration:none; }
        del { text-decoration:line-through; }
        table { border-collapse:collapse;border-spacing:0; }

        body {
            background: #E4E4E4 url("bg.png");
            color: #292929;
            color: rgba(0, 0, 0, 0.82);
            font: normal 100% Cambria, Georgia, serif;
            -moz-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
            -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
            -webkit-text-size-adjust: none;
        }
        a {
            color: #890101;
            text-decoration: none;
            -moz-transition: 0.2s color linear;
            -webkit-transition: 0.2s color linear;
            transition: 0.2s color linear;
        }
        a:hover {
            color: #DF3030;
        }
        #page {
            background: url("rag.png") repeat-x;
            padding: 2em 0;
        }
        .inner {
            margin: 0 auto;
            width: 93.75%;
        }
        img {
            max-width: 100%;
        }
        .amp {
            font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
            font-style: italic;
            font-weight: normal;
        }
        .mast {
            float: left;
            width: 31.875%;
        }
        h1 {
            background: url("logo-bg.png") no-repeat 50% 0;
        }
        h1 a {
            padding-top: 117px;
            height: 162px;
            display: block;
            text-align: center;
        }
        .intro,
        .main,
        .footer {
            float: right;
            width: 65.9375%;
        }
        .intro {
            margin-top: 117px;
        }
        .intro div {
            line-height: 1.4;
        }
        ul.nav {
            border-top: 1px solid #888583;
            margin: 2em auto 0;
            width: 64.379%;
        }
        ul.nav a {
            background: url("ornament.png") no-repeat 0 100%;
            font: bold 14px/1.2 "Book Antiqua", "Palatino Linotype", Georgia, serif;
            display: block;
            text-align: center;
            letter-spacing: 0.1em;
            padding: 1em 0.5em 3em;
            margin-bottom: -1em;
            text-transform: uppercase;
        }
        ul.nav a:hover {
            background-position: 50% 100%;
        }
        li.first a {
            border-top: 1px solid #FFF9EF;
            padding-top: 1.25em;
        }
        ul.nav i {
            font: normal 10px Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
            display: block;
            letter-spacing: 0.05em;
        }
        .intro h2 {
            font: normal 2em "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;
            text-align: center;
            margin-bottom: 0.25em;
        }
        .main h2 {
            background: url("ornament.png") no-repeat 0 50%;
            font-size: 1.4em;
            text-transform: lowercase;
            text-align: center;
            margin: 0.75em 0 1em;
        }
        .main h2 b {
            background: url("bg.png");
            font-weight: normal;
            padding: 0 1em;
        }
        .figure {
            float: left;
            font-size: 10px;
            letter-spacing: 0.05em;
            line-height: 1.1;
            margin: 0 3.317535545023696682% 1.5em 0;
            text-align: center;
            text-transform: uppercase;
            width: 31.121642969984202211%;
        }
        .figure b {
            display: block;
            font-size: 14px;
            font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
            letter-spacing: 0.1em;
        }
        .figure img {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);;
            display: block;
            margin: 0 auto 1em;
        }
        li#f-mycroft,
        li#f-winter {
            margin-right: 0;
        }
        .footer {
            background: url("ornament.png") 50% 0 repeat-x;
            font-size: 12px;
            text-align: center;
            padding: 40px 0 20px;
        }
        .footer p {
            margin-bottom: 0.5em;
        }
    </style>

</head>

<body>

<div id="page">
    <div class="inner">
        <div class="mast">
            <h1 id="logo"><a href="#"><img src="logo.png" alt="The Baker Street Inquirer" /></a></h1>

            <ul class="nav">
                <li class="first"><a href="#"><i>The</i> Weblogue</a></li>
                <li><a href="#"><i>Back</i> Issues</a></li>
                <li class="last"><a href="#"><i>About</i> Our Paper</a></li>
            </ul>
        </div>

        <div class="section intro">
            <div>
                <h2>&#8220;Give me problems, give me&nbsp;<em>work</em>.&#8221;</h2>

                <p>In the year 1878 I took my degree of Doctor of Medicine of the University of London, and proceeded to Netley to go through the course prescribed for surgeons in the army. Having completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant Surgeon. The regiment was stationed in India at the time, and before I could join it, the second Afghan war had broken out. On landing at Bombay, I learned that my corps had advanced through the passes, and was already deep in the enemy&#8217;s&nbsp;country.</p>
            </div>
        </div>

        <div class="section main">
            <h2><b>Victors <abbr class="amp" title="And">&amp;</abbr> Villains</b></h2>
            <ol>
                <li id="f-holmes" class="figure">
                    <a href="#">
                        <img src="f-holmes.jpg" alt="" />
                        <span class="figcaption">Sherlock <b>Holmes</b></span>
                    </a>
                </li>
                <li id="f-watson" class="figure">
                    <a href="#">
                        <img src="f-watson.jpg" alt="" />
                        <span class="figcaption"><abbr title="Professor">Dr</abbr> John Hemish <b>Watson</b></span>
                    </a>
                </li>
                <li id="f-mycroft" class="figure">
                    <a href="#">
                        <img src="f-mycroft.jpg" alt="" />
                        <span class="figcaption">Mycroft <b>Holmes</b></span>
                    </a>
                </li>
                <li id="f-moriarty" class="figure">
                    <a href="#">
                        <img src="f-moriarty.jpg" alt="" />
                        <span class="figcaption"><abbr title="Professor">Prof</abbr> James <b>Moriarty</b></span>
                    </a>
                </li>
                <li id="f-adler" class="figure">
                    <a href="#">
                        <img src="f-adler.jpg" alt="" />
                        <span class="figcaption">Irene <b>Adler</b></span>
                    </a>
                </li>
                <li id="f-winter" class="figure">
                    <a href="#">
                        <img src="f-winter.jpg" alt="" />
                        <span class="figcaption">James <b>Winter</b></span>
                    </a>
                </li>
            </ol>
        </div>

        <div class="footer">
            <p>Illustrations by <a href="http://en.wikipedia.org/wiki/Sidney_Paget">Sidney Paget</a>, words by <a href="http://en.wikipedia.org/wiki/Arthur_Conan_Doyle">Sir Arthur Conan Doyle</a>.</p>
            <p>What remains is by <a href="http://unstoppablerobotninja.com/">Ethan Marcotte</a>.</p>
        </div>
    </div>
</div>

<script type="text/javascript" src="site/imgSizer.js"></script>
<script type="text/javascript">
    window.onload = function() {
        imgSizer.collate();
    }
</script>
<script type="text/javascript" src="share/ddpng.js"></script>
<script type="text/javascript">
    DD_belatedPNG.fix('body, #page, h1, h1 img, ul.nav, ul.nav a, .main h2, .main h2 b, .footer');
</script>

</body>

</html>